<template>
  <div class="music-box" >
    <!-- {{music}} -->
    <div class="box-left">
      <div class="nub">&nbsp;{{idx+1}}&nbsp;</div>
      <div class="name">{{music.name}}</div>
      <div class="nametip">
        <!-- <span v-if="isShow = music.song.album.type == 'EP/Single' ? true : false">SQ</span> -->
        {{music.ar[0].name}}-{{music.al.name}}
      </div>
    </div>
    <div class="box-right">
      <i class="iconfont" :class="icon?'icon-bofang':'icon-bofang1'" ></i>
    </div>
  </div>
</template>
<script>
// import {api} from '../../assets/http/api'
import { mapMutations } from 'vuex'
export default {
  props: ["music","idx"],
  data() {
      return {
        icon:true
      }
  },
  methods: {
    ...mapMutations['getUrl'],
    play(){
      document.querySelector("audio").play()
    }
  },
};
</script>
<style lang="scss">
.music-box {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  .box-left {
    position: relative;
    .name {
      text-align: start;
      padding: 5px 0 5px 20px;
          font-weight: bold;
          width: 251px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
    .nub{
      position: absolute;
    top: 11px;
    }
    .nametip {
      text-align: start;
      color: #8c8c8c;
      font-size: 11px;
      padding-left: 20px;
      span {
        border: 1px solid #fe753e;
        color: #fe753e;
        margin-right: 2px;
      }
    }
  }
  .box-right {
    padding-right: 16px;
    color: #aaaaaa;
    i {
      font-size: 23px;
      line-height: 46px;
    }
  }
}
</style>